<template>
  <view class="container">
    <sc-navbar title="手动补货" back></sc-navbar>
    <glo-gutter>
      <glo-search v-model="listData.params.commonSerchName" placeholder="请输入商品名称或商品编号搜索"
        @search="getProductManagementPage" show-scan @scan="handlerScan"></glo-search>
      <glo-chunk v-for="item in listData.list" :key="item.id" @click="changeSelect(item)">
        <sc-flex ai="center" pb="13" col-gap="10">
          <glo-choice :selected="item.id === listData.selected"></glo-choice>
          <glo-title :title="item.productName || item.brandName"></glo-title>
        </sc-flex>
        <sc-flex ai="center" col-gap="25">
          <sc-image src="/static/images/empty.png" width="90" height="90"></sc-image>
          <glo-info :info="getInfo(item)"></glo-info>
        </sc-flex>
      </glo-chunk>
    </glo-gutter>

    <!-- 底部确认按钮 -->
    <sc-footer height="150" col-gap="45">
      <sc-button type="grey-blue" width="262" height="75" text="取消" @click="uni.navigateBack()"> </sc-button>
      <sc-button type="primary" width="262" height="75" text="确认" @click="handlerConfirm">
      </sc-button>
    </sc-footer>
  </view>
</template>

<script setup>
const getInfo = (item) => {
  return [
    { type: 'single', label: "商品编号", value: item.productCode },
    { type: 'single', label: "商品规格", value: item.tailorismName },
    { type: 'single', label: "生产厂家", value: item.operatingName },
    { type: 'single', label: "UDI编码", value: item.diCode || item.barcode },
    { type: 'single', label: "注册证号", value: item.registrationCertificateNumber },
  ]
}
const listData = reactive({
  params: {
    pageNo: 1,
    pageSize: 10,
    commonSerchName: "",
  },
  list: [],
  total: 0,
  selected: ''
})
const getProductManagementPage = () => {
  _api.getProductManagementPage(listData.params).then(res => {
    listData.list = res.list || [];
    listData.total = res.total || 0;
  })
}
getProductManagementPage()

const changeSelect = (item) => {
  listData.selected = listData.selected == item.id ? '' : item.id;
}

/**
 * 确认补货
 */
const handlerConfirm = () => {
  if (!listData.selected) {
    uni.showToast({
      title: "请选择商品",
      icon: "none"
    })
    return
  }
  uni.navigateTo({
    url: "/subPublic/pages/replenishInfo?id=" + listData.selected
  })
}



/**
 * 扫描
 */
const handlerScan = () => {
  console.log("🚀 handlerScan: ");
}
</script>

<style lang="scss">
page {
  background: $color-bg;
}
</style>

<style lang="scss" scoped>
.scan-wrap {
  padding: 40rpx 25rpx;
  background-color: #fff;
  border-radius: 8rpx;

  .scan-btn {
    width: 120rpx;
    height: 120rpx;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8rpx 20rpx rgba(74, 144, 226, 0.3);

    image {
      width: 60rpx;
      height: 60rpx;
    }
  }
}
</style>
